<template>
  <el-tabs type="border-card"  v-model="tabName" @tab-click="request">
    <!-- 未注销显示内容 -->
    <el-tab-pane label="未注销" name="uncancelled">
      <SearchAdd :openAddDialog='openAddDialog' :show="1" @send-data="search" :cancellation='cancellation' :flag="0"></SearchAdd>
      <el-table
        row-key="date"
        ref="filterTable,multipleTable"
        tooltip-effect="dark"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        @row-click="test"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="doubtId" label="ID" width="200px"></el-table-column>
        <el-table-column prop="doubtContent" label="提问内容" width="260px"> </el-table-column>
        <el-table-column prop="userName" label="提问用户" width="260px"> </el-table-column>
        <el-table-column prop="typeName" label="类型名" width="260px"> </el-table-column>
        <!--  <el-table-column prop="replys[0].userName" label="回复用户" width="260px"> </el-table-column>
       <el-table-column prop="replys[0].replyContent" label="回复内容" width="260px"> </el-table-column> -->

        <el-table-column>
          <el-popover placement="right" :width="400" trigger="click">
            <template #reference>
              <el-button @click="replyContents" trigger="hover">查看回复</el-button>
            </template>
            <el-table :data="replysData">
               <el-table-column prop="userName" label="回复用户" width="260px"> </el-table-column>
              <el-table-column width="150" property="replyContent" label="回复内容"></el-table-column>
            </el-table>
          </el-popover>
        </el-table-column>

        <el-table-column label="操作" width="180">
          <el-button type="danger" @click="cancellation">注销</el-button>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <!-- 已注销显示内容 -->
    <el-tab-pane label="已注销"  name="cancelled">
      <SearchAdd :flag="1" :show="1" @send-data="search"></SearchAdd>
      <el-table
          ref="filterTable,multipleTable"
          tooltip-effect="dark"
          :data="tableData"
          style="width: 100%"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="doubtId" label="ID" width="200px"></el-table-column>
        <el-table-column prop="doubtContent" label="提问内容" width="260px"> </el-table-column>
        <el-table-column prop="userName" label="用户名" width="260px"> </el-table-column>
        <el-table-column prop="typeName" label="类型名" width="260px"> </el-table-column>
        <el-table-column prop="replys[0].userName" label="回复用户" width="260px"> </el-table-column>
        <el-table-column prop="replys[0].replyContent" label="回复内容" width="260px"> </el-table-column>
      </el-table>
    </el-tab-pane>
  </el-tabs>

</template>

<script>
import SearchAdd from '@/components/SearchAdd.vue';
import { getAllDoubtsValid,delDoubt,getAllDoubts} from '@/api/secondary_page/comment_manage'
import { ElMessage } from 'element-plus'
export default {
    name:"PageCommentManage",
     data() {
      return {
        title:'',
        tabName:'uncancelled',
        isShow:false,//添加or修改
        flag:1,
        dialogFormVisible:false,//弹窗开关
        tableData: [],//后台返回数据
        replysData:[],//获取回复
        multipleSelection: [],//多选选中行数据
        comment:{//评论留言
            doubtId:'',
            doubtContent:'',
            typeId:'',
            userName:'',
            typeName:'',
            replys:{
              replyId:'',
              userName:'',
              replyContent:'',
            },
            flag:0
        },
        rules: {//验证规则
          patientName: [
            { required: true, message: '请输入就诊人姓名', trigger: 'blur' },
            {
              min: 2,
              message: '长度最少 2 个字符',
              trigger: 'blur',
            },
          ],
           phoneNumber: [
            { required: true, message: '手机号不能为空'},
            {
              min: 11,
              message: '手机号格式不正确',
              trigger: 'blur',
            },
          ],
          idCardId: [
            { required: true, message: '请选择证件类型', trigger: 'blur' },
            {
              min: 2,
              message: '长度最少 2 个字符',
              trigger: 'blur',
            },
          ],
         
           idCardNumber: [
            { required: true, message: '证件号不能为空',trigger: 'blur'},
            {  
              min:18,
              message: '证件号格式有误',
              trigger: 'blur',
            },
          ],
        }
      }
    },
     methods:{
      //获取医师信息请求封装
      getAllDoubtsValids(){
        getAllDoubtsValid(this.comment).then(
            response =>{
              this.tableData = response;
              console.log(this.tableData);
            }
          )
        },
        replyContents(){
          this.multipleSelection.forEach((item)=>{
            this.replysData = item.replys
            console.log(this.replysData)
          })
          // this.replysData = this.multipleSelection
        },
        //获取医师信息请求处理
        request(tab){
          this.comment={}
          if(tab.props.name=='uncancelled'){
            this.comment.flag = 0
          }else{
            this.comment.flag = 1
          }
          this.getAllDoubtsValids()
        },
       //多选函数
       handleSelectionChange(val) {
          this.multipleSelection = val
        },
        //弹窗开关
        openDialog(){
          this.dialogFormVisible = !this.dialogFormVisible
        },
        //打开添加弹窗
        openAddDialog() {
          this.openDialog()
          this.isShow = true
          this.title = '添加就诊人信息'
        },
        //打开修改弹窗
        openUpdateDialog(row) {
          this.openDialog()
          this.isShow = false
          this.title = '修改就诊人信息'
          this.test(row);
        },
        //获取el-table选中行数据
        test(row){
          this.comment = row
          if(this.multipleSelection.length == 0){
            this.multipleSelection.push(row)
          }else{
            this.multipleSelection.forEach((item)=>{
              if(item.doubtId != row.doubtId ){
                this.multipleSelection.push(row)
              }
            })
          }
        },
        //格式化数据
        formatter(row){
          let arr = []
          row.requirementTypes.forEach((item, index)=>{
            if (index > 2) {
              return
            }
            arr.push(item.typeName);
          })
          return arr.join(',')
        },
        //弹窗取消函数
        cancel(formName){
          this.openDialog();
          this.$refs[formName].resetFields()
          ElMessage('操作已取消')
          this.patient = {}
          this.patient.flag=0
          this.getAllPatient()
        },
 
        //注销函数
        cancellation() {
        this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.multipleSelection.forEach((item)=>{
              console.log(item.doubtId)
              delDoubt(item.doubtId).then(
                response => {
                  if(response == 1){
                    this.$message({
                      type: 'success',
                      message: '删除成功!',
                    })
                    this.comment = {}
                    this.comment.flag = 0
                    this.getAllDoubtsValids();
                  }else{
                      ElMessage.error('删除失败')
                  }
                }
              )
            })
            this.multipleSelection = []
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除',
            })
          })
        },
        filterHandler(value, row, column) {
          const property = column['property']
          return row[property] === value
        },
        //搜索函数
       search(input,type,o){
          if(o){
            if(isNaN(input)){
              this.comment.userName = input
              this.comment.typeName = input
              this.comment.doubtId = input
            }else{
              this.comment.doubtId = input
            }
            this.getAllDoubtsValids()
           }
          else{ 
            getAllDoubts(this.comment.flag).then(
              response =>{
                this.tableData = response;
               
              }
            )
          }
        },
      },
       
    mounted(){
      this.comment = {}
      this.comment.flag = 0
      this.getAllDoubtsValids();
      // getAllPatients().then(
      //   response =>{
      //     console.log(response);
      //     this.tableData = response;
      //   }
      // )
      // this.tableData.forEach((item)=>{
      //   console.log(item.flag)
      // })
    },
    components:{
      SearchAdd,
    }
}
</script>

<style scoped>

</style>

